<template>
  <div ref="dataScreen" v-loading="loading" :class="[isFullscreen ? 'dataScreenGn' : 'dataScreenGn screenStyle' ]">
    <h2>{{ $t('大数据显示屏') }}</h2>
    <!-- 正常 -->
    <svg-icon v-if="isFullscreen" icon-class="fullscreen" @click="fullscreen" />
    <!-- 全屏 -->
    <svg-icon v-else icon-class="exit-fullscreen" @click="exitScreen" />

    <el-row :gutter="20">
      <el-col :span="7" class="el-row-col">
        <div class="boxall" style="margin-right: 25px;">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('项目类型占比') }}</p>
            <DealIndustryGn ref="DealIndustry" :chart-data="dealIndustryData" @clickIndustryName="onClickStateName" />
          </div>
          <div class="boxfoot" />
        </div>
        <div class="boxall">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('目前状态占比') }}</p>
            <DealStateGn ref="DealState" :chart-data="dealStatusData" @clickStateName="onClickStateName" />
          </div>
          <div class="boxfoot" />
        </div>
      </el-col>
      <el-col :span="10">
        <div class="boxall noborder" style="height: calc((100% - 140px) / 2 + 100px);">
          <div class="map" style="height:100%;">
            <MapChartGn ref="MapChart" :chart-data="chartData" />
          </div>
        </div>
        <div class="boxall" style="height: calc((100% - 140px) / 2);">
          <div style="height:100%;position:relative;">
            <p class="chartTit">{{ $t('投资阶段') }}</p>
            <DealPhaseGn ref="DealPhase" :chart-data="dealStageData" />
          </div>
          <div class="boxfoot" />
        </div>
      </el-col>
      <el-col :span="7" class="el-row-col">
        <div class="boxall" style="margin-left: 25px;">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('所属基金分布') }}</p>
            <DealTypeGn ref="DealType" :chart-data="dealTypeData" @clickName="onClickStateName" />
          </div>
          <div class="boxfoot" />
        </div>
        <div class="boxall">
          <div style="height:100%;">
            <p class="chartTit lt">{{ $t('并购股比（%）') }}</p>
            <DealStateGn ref="DealTeamGn" :chart-data="dealTeamData" @clickStateName="onClickStateName" />
          </div>
          <div class="boxfoot" />
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <component :is="path" />
    </el-dialog>
  </div>
</template>
<script>
import DealTypeGn from '@/views/saas/gnfund/report/dealTypeGn'
import DealStateGn from '@/views/saas/gnfund/report/dealStateGn'
import DealPhaseGn from '@/views/saas/gnfund/report/dealPhaseGn'
import DealIndustryGn from '@/views/saas/gnfund/report/dealIndustryGn'
import { getAsyncComponent } from '@/utils'
import {
  findDealStatusProportion,
  countDealStage,
  dataScreenSummary
} from '@/api/base/deal/dealBase'
import { findDealGroupDealSource, countGnDealArea, countGnIndustryFocus, dealTeamGnCount } from '@/api/sass/gnfund/gnDealBase'
import MapChartGn from '@/views/chart/mapChart'

export default {
  components: {
    MapChartGn,
    DealTypeGn,
    DealStateGn,
    DealPhaseGn,
    DealIndustryGn
  },
  data() {
    return {
      stageType: 'equity',
      loading: false,
      // 汇总值数据
      summaryData: {},
      // 投资地域统计
      chartData: [],
      // 项目类型占比
      dealTypeData: [],
      // 聚焦行业统计
      dealIndustryData: [],
      // 项目状态占比
      dealStatusData: [],
      // 项目阶段统计
      dealStageData: [],
      // 项目团队统计
      dealTeamData: [],
      dynamicHeight: 180,
      isFullscreen: true,
      boxHeight: 350,
      dataHeight: 0,
      // 由于修改项目地域分布countDealArea改成了post方法
      queryParams: {},
      dialogVisible: false,
      path: '',
      title: ''
    }
  },
  computed: {
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.load()
      })()
    }
    this.$nextTick(() => {
      this.load()
    })
  },
  methods: {
    stageTypeChange(val) {
      this.loadDeal(val)
    },
    // 初始化数据
    initData() {
      this.loading = true
      countGnDealArea(this.queryParams).then(response => {
        this.chartData = response.data
      })
      findDealGroupDealSource().then(response => {
        this.dealTypeData = response.data
      })
      countGnIndustryFocus().then(response => {
        this.dealIndustryData = response.data
      })
      findDealStatusProportion().then(response => {
        this.dealStatusData = response.data
      })
      // countDealStage({}).then(response => {
      //   this.dealStageData = response.data
      // })
      dealTeamGnCount(null).then(response => {
        this.dealTeamData = response.data
      })

      // 查询汇总值数据
      dataScreenSummary().then(response => {
        this.summaryData = response.data
      })
      this.loadDeal()

      this.loading = false
    },
    loadDeal(type) {
      var row = {
        stageType: type || 'equity'
      }
      countDealStage(row).then(response => {
        this.dealStageData = response.data || []
      })
    },
    fullscreen() {
      this.isFullscreen = false
      this.load()
    },
    exitScreen() {
      this.isFullscreen = true
      this.load()
    },
    load() {
      this.$nextTick(() => {
        if (this.$refs?.dataScreen?.clientHeight !== undefined) {
          this.boxHeight = this.$refs.dataScreen.clientHeight * 0.58
          this.dynamicHeight = this.$refs.dataScreen.clientHeight - this.boxHeight - 110
          this.dataHeight = this.boxHeight - this.dynamicHeight - 10

          var obj = {}
          for (obj in this.$refs) {
            if (this.$refs[obj]?.initChart !== undefined) {
              this.$refs[obj].initChart()
              this.$refs[obj].chart.resize()
              this.$refs[obj].$_resizeHandler()
            }
          }
          this.initData()
        }
      })
    },
    // 点击的名字
    onClickName(name) {
      if (name) {
        this.title = name
        this.dialogVisible = true
        // '@/views/deal/report/chart/charTable'
         // const path = '@/views/deal/report/projectInvestmentSituation/projectInvestmentSituation'
         let path = ''
               let type = ''
              if (name === '股权投资') {
                type = 'equity'
              } else if (name === '参股基金') {
                 type = 'bf'
              } else if (name === '债权投资') {
                type = 'debt'
              } else if (name === '地产项目') {
                type = 'estate'
              } else if (name === '债券投资') {
                type = 'bond'
              }
            this.$route.params.dealType = type
             this.$route.params.model = 1
            path = '@/views/deal/report/chart/charTable'

         this.path = getAsyncComponent(path)
      }
    },
    // 聚焦行业
    onClickIndustryName(name) {
       if (name) {
            this.title = name
            this.dialogVisible = true
            this.$route.params.model = 2
            this.$route.params.dealType = name
            const path = '@/views/deal/report/chart/charTable'
            this.path = getAsyncComponent(path)
       }
    },
    // 项目状态
    onClickStateName(name) {
        if (name) {
          this.title = name
          this.dialogVisible = true
          let type = ''
           if (name === '储备') {
              type = 'CB'
           } else if (name === '投前') {
              type = 'TQ'
           } else if (name === '投后') {
              type = 'TH'
           } else if (name === '终止') {
              type = 'ZZ'
           } else if (name === '退出') {
              type = 'TC'
           }
            this.$route.params.model = 3
            this.$route.params.dealType = type
             const path = '@/views/deal/report/chart/charTable'
            this.path = getAsyncComponent(path)
       }
    }
  }
}
</script>
<style lang="scss" scoped>
.select-deal{
  width: 100px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 9999;
  /deep/input{
    background-color: transparent;
    border: 1px solid #01FFFF;
    color: #01FFFF;
  }
  /deep/.el-select__caret{
    color: #01FFFF;
  }
}
.dataScreenGn {
  background-color: #fff;
  border-radius: 5px;
  background: #2C365C;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100%;
  overflow: hidden;
  position: relative;
  .el-row{
    height: calc(100% - 70px);
    padding: 0 20px;
    .el-col{
      height: 100%;
    }
    .el-row-col{
      .boxall{
        height: calc((100% - 40px) / 2);
        &:last-child{
          margin: 0;
        }
      }
    }
  }
  .svg-icon{
    position: absolute;
    color: #fff;
    right: 20px;
    top: 15px;
    cursor: pointer;
  }
  .screenData {
    padding: 10px;
    height: 100%;
    display: flex;
    li {
      flex: 1;
      padding: 5px;
      // overflow: hidden;
      &:nth-child(2n){
        margin-right: 0px;
      }
      p {
        margin: 0;
        font-size: 15px;
        font-weight: bold;
        // white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #fff;
        &:last-child {
          color: #01FFFF;
          font-weight: normal;
          margin-top: 6px;
          font-size: 12px;
          position: relative;
          padding-left: 8px;
          &::before{
            position: absolute;
            content: '';
            background-color: #FF9F00;
            width: 3px;
            height: 10px;
            left: 0;
            top: 2px;
          }
        }
      }
    }
  }

  .chartTit {
    margin: 15px 10px 0;
    position: absolute;
    font-size: 14px;
    width: 100%;
    color: #01FFFF;
    font-weight: bold;
    border-left: 3px solid #01FFFF;
    line-height: 12px;
    padding-left: 6px;
  }
  .chartTit.lt{
    text-align: left;
    margin-left: 10px;
  }

  h2 {
    margin: 0;
    height: 40px;
    line-height: 60px;
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
    font-size: 20px;
    background-color: #0A2965;
    border-bottom: 1px solid #1D7E80;
    position: relative;
    &::before{
      position: absolute;
      content: "";
      transform:perspective(0.5em)  rotateX(-5deg);
      border: 1px solid #1D7E80;
      border-top: 1px solid #0A2965;
      top: 40px;
      left: 50%;
      bottom: 0;
      right: 0;
      background: #0A2965;
      display: inline-block;
      width: 400px;
      margin-left: -200px;
      height: 25px;
    }
  }
  .map {
    position: relative;
    height: 100%;

    .map4 {
      width: 200%;
      height: 7rem;
      position: relative;
      left: -50%;
      top: 4%;
      margin-top: .2rem;
      z-index: 5;
    }
  }

}
</style>
